<template>
	<view class="bg-white p-10">
		<z-paging v-model="list" ref="paging" @query="getList" use-page-scroll>
			<view v-for="(item,index) in list" class="flex flex-x-space-between p-10 under-line flex-y-center">
				<view class="text-grey-2 w-p-85" @click="click(item.id)">
					<view class="fs-13 mb-3 flex flex-y-center"><span v-if='item.is_default=="1"'
							class="bg-red-1 px-4 rounded-5 fs-10 text-white mr-5">默认</span>
						{{item.province}}{{item.city}}{{item.area}}
					</view>
					<view class="fw-600 text-black fs-17 mb-3">{{item.detail}}</view>
					<view class="fs-14">{{item.name}} <span class="fw-600">{{item.mobile}}</span></view>
				</view>
				<view class="p-4 rounded-circle bg-grey-6">
					<uv-icon name="edit-pen" size="20" color="#000"
						@click.stop="$page.open('/pages/address/form?id='+item.id)"></uv-icon>
				</view>
			</view>
		</z-paging>
		<view class="position-fixed left-15 right-15 bottom-20 btn-blue text-white rounded-20 flex flex-center py-8"
			@click="$page.open('/pages/address/form')">
			新增地址
		</view>
	</view>
</template>

<script setup>
	import useZPaging from "@/uni_modules/z-paging/components/z-paging/js/hooks/useZPaging";
	import { ref } from 'vue'
	import { $page, $http } from '@/utils/index'
	import { onShow, onLoad } from '@dcloudio/uni-app'
	const list = ref()
	const paging = ref()
	useZPaging(paging)
	const queryForm = ref({
		page: 1,
		limit: 10
	})
	const back = ref(false)
	onLoad(option => {
		if (option.status) {
			back.value = true
		}
	})
	onShow(() => {
		if (paging.value) {
			paging.value.reload()
		}
	})
	const getList = (pageNo, pageSize) => {
		queryForm.value.page = pageNo
		queryForm.value.limit = pageSize
		$http.get('Address/getList', queryForm.value).then((res) => {
			paging.value.complete(res.data)
		})
	}
	const click = (id) => {
		if (back.value) {
			let pages = getCurrentPages();
			let prevPage = pages[pages.length - 2];
			prevPage.$vm.address_id = id
			$page.back()
			return true;
		}
	}
</script>

<style>
	.under-line {
		border-bottom: 2rpx solid #eee;
	}
</style>